<template>
  <div id="line" style="width: 700px; height: 400px; "></div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      data: [],
      Xdata:[],
      Ydata:[]
    };
  },
  watch: {},
  computed: {},
  methods: {
    line() {
      // 创建echarts实例
      var dom = document.getElementById("line");
      var myChart = this.$echarts.init(dom);
      var lineOption = {
        xAxis: {
          type: "category",
          data:  this.Xdata
        },
        
        yAxis: {
          type: "value",
        },
        series: [
          {
         data: this.Ydata,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      //调用 setOption 将option 输入echarts,然后echarts渲染图表
      lineOption && myChart.setOption(lineOption);
    },
  },
  created() {},
  async mounted() {
   await this.request.get("/user").then((res) => {
    console.log(res)
            //   res.data.data;
            // 把role全部输出
            var x = []
            // var i = 0
            // var j = 0
            // var y = []
            res.data.data.filter(e =>{
                x.push(e.role)
            })
           console.log(x)
          const counts = {};
          for(const num of x){
            counts[num] = counts[num] ? counts[num] +1:1;
          }
          
          this.Ydata.push(counts['ROLE_USER'],counts['ROLE_ADMIN'])
        //    x去重就是X轴的值
        var a = new Set(x)
        this.Xdata = [...a]
        })
        this.line()
  },

};
</script>
<style scoped>
</style>